<template>
    <div>
        <mainTitle :name="title"></mainTitle>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="ID" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户账号" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.uname }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.account }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.uname }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="年龄" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.age }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="性别" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.sex }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import mainTitle from '../../components/MainTitle.vue'
import { Message } from 'element-ui'

export default {
    name: 'user',
    components: {
        mainTitle
    },
    data() {
        return {
            title: '用户账户',
            //用户数据
            tableData: []
        }
    },
    methods: {
        handleEdit(index, row) {
            // console.log(index, row);
            Message.success('修改成功')

        },
        handleDelete(index, row) {
            // console.log(index, row);
            Message.success('删除成功')
        }
    },
    mounted() {
        this.$axios.get('http://localhost:8080/api/alluser').then(res => {
            // console.log(res.data)
            res.data.forEach(item => {
                this.tableData.push(item)
            });
        }, err => {
            Message.error('初始化加载失败！！！')
        })
    }
}
</script>

<style lang="less" scoped>

</style>